// src/directive/loading/Loading.vue
<template>
  <div v-show="visible" class="loading-wrap full">
    <div class="loading-box">
      <div>
        <img style="margin:auto" src="http://www.ranjun.xyz/img/icon/鲜花 (3).png"/>
      </div>
      <p>拼命加载中...</p>
    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// export default Vue.extend({
//   data() {
//     return {
//       visible: true,
//     };
//   },
// });
export default {
  data() {
    return {
      visible: true,
      full:true,
    };
  },
};
</script>
<style lang="scss" scoped>
.loading-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.loading-box {
  position: relative;
  left: 50%;
  top: 50%;
  width: 100px;
  color: white;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
  font-family: title;
  >div{
    display: inline-block;
    margin: 5px;
    animation: active 1s infinite;
  }
}
@keyframes active {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}
</style>
